<template>
    <div>
        <el-divider></el-divider>
        <el-divider></el-divider>
        <el-divider></el-divider>
        <!-- 卡片视图区域 -->
        <el-card>
            <el-row :gutter="20">
                <el-col :span="12">
                    <!-- 搜索与添加区域 -->
                    <el-input  v-model="queryInfo.query" placeholder="请输入内容" clearable  style="padding-left: 40%">
                        <el-button slot="append" icon="el-icon-search"  @click="SearchByName"></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-divider></el-divider>
            <!-- 列表区域 -->
            <el-table stripe border :data="patentList.slice((currentPage-1)*pageSize,currentPage*pageSize)">
                <el-table-column label="专利号" prop="patentID"></el-table-column>
                <el-table-column label="专利名称" prop="patentname"></el-table-column>
                <el-table-column label="专利类型" prop="patentType"></el-table-column>
                <el-table-column label="发明人" prop="inventors"></el-table-column>
                <el-table-column label="申请日期" prop="applytime"></el-table-column>
                <el-table-column label="地址" prop="address"></el-table-column>
                <el-table-column label="专利有效期" prop="times"></el-table-column>
                <el-table-column label="描述" prop="pdescribe"></el-table-column>
                <!--<el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                icon="el-icon-edit"
                                circle
                                @click="showEditDialog(scope.row.patentID)"></el-button>
                    </template>
                </el-table-column>-->
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                           :page-sizes="[1, 2, 5, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="patentList.length">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default{
        data() {
            return {
                patentList: [],
                queryInfo: {
                    query: '',
                },

                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5 ,// 每页的数据条数
            }
        },
        /*created() {
            this.SearchByName()
        },*/
        methods: {
            async SearchByName () {
                const { data:resString1 } = await this.$http.get('searchByName',{params:this.queryInfo})
                /*const res1 = JSON.parse(resString1); //json转换为js对象
                this.patentList = res1.data;*/
                this.patentList = resString1.data;
            },

            /* 分页功能的实现 */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
        },
    }
</script>

<style lang="less" scoped>
    .el-breadcrumb{
        margin-top: 10px;
        margin-left: 8px;
        margin-bottom: 10px;
        font-size: 15px;
    }
    .el-card{
        box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    }
    .el-divider--horizontal{
        margin: 8px 0;
        background: 0 0;
        border-top: 1px dashed #0979ea;
    }

</style>
